<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content=""/>
    <meta name="author" content=""/>
    <meta name="referrer" content="no-referrer">
    <link rel="icon" href="./img/asset-favicon.ico"/>
    <title>社交-头条</title>
    <!-- 页面 css js -->
    <!-- <script type="text/javascript" src="../../plugins/sui/sui.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css"/>

    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css"/>
    <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="./css/widget-base.css"/>
    <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css"/>
    <link rel="stylesheet" type="text/css" href="./css/page-sj-headline-login.css"/>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
         /* 分页样式 */
        .pagenation{height:32px;text-align:center;font-size:0;margin:30px auto;}
        .pagenation a{display:inline-block;border:1px solid #d2d2d2;background-color:#f8f6f7;font-size:12px;padding:7px 10px;color:#666;margin:5px}
        .pagenation .active{background-color:#fff;color:#43a200}
    </style>


    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="wrapper base_nav">
</div>

<div class="sui-container wrapper">
    <!--引用组件-->
    <!--三列布局-->
    <div class="sj-content" id="hdd">
        <div class="left-nav" >
            <div class="float-nav" id="float-nav" style="width: 160px;float: left; height: 1300px;">
                <ul class="sui-nav nav-tabs nav-xlarge tab-navbar tab-vertical">
                    <li :class="(column == 0)?'active':''">
                        <a href="#" @click='column = 0' style="border-radius: 7px;">热门</a></li>
                    <li v-for="column_list in columns" :class="(column_list.id == column)?'active':''">
                        <a @click='get_headline(column_list.id)'>
                            {{ column_list.name }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right-content" style=" position: absolute; top: 0px;">
            <div class="fl middle">
                <!-- <div class="carousel">
                    <div data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="active item">
                                <img src="./img/widget-banner01.png"/>
                            </div>
                            <div class="item">
                                <img src="./img/widget-banner02.png"/>
                            </div>
                            <div class="item">
                                <img src="./img/widget-banner01.png"/>
                            </div>
                        </div>
                    </div>
                </div> -->
                <!-- 轮播 start -->
                <div style="background:#868686;height:385.7px;width:675px;">
                <!-- 主页图片分辨率675X385.7 上传时用PS修改分辨率 右侧放置基本信息 -->
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                      <!-- Indicators -->
                      <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                      </ol>

                      <!-- Wrapper for slides -->
                      <div class="carousel-inner" role="listbox">
                        <div class="item active" style="height:385.7px;width:675px;">
                          <img src="./img/index1.jpg"/>
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item" style="height:385.7px;width:675px;">
                          <img src="./img/index2.jpg"/>
                          <div class="carousel-caption">
                          </div>
                        </div>
                        <div class="item" style="height:385.7px;width:675px;">
                          <img src="./img/index3.jpg"/>
                          <div class="carousel-caption">
                          </div>
                        </div>
                      </div>
                    </div>
                </div>
                <!-- 轮播 end -->
                <div class="data-list">
                    <ul id="data-list-down" class="headline loading">
                        <!-- 热门 -->
                        <li v-show="column==0" class="headline-item" v-for="j in headlines_hot">
                            <div class="fl indexImg">
                                <img src=""/>
                            </div>
                            <div class="words" >
                                <h3><a :href="'./headline-detail.html?id='+j.id" >{{ j.title }}</a> <span><img src="img/asset-vip.png" class="vip" v-show="j.is_vip"/></span></h3>
                                <h5 class="author">
                                    <div class="fl">
                                        <span class="authorName"> <img :src="j.user.avatar_url" alt=""/> {{ j.user.nickname }} </span>
                                        <span>{{ j.create_time | str2date | date_md }}    {{ j.create_time | str2date | date_hm }}</span>
                                    </div>
                                    <!--<div class="fr attention">-->
                                        <!--<span class="attentionText">关注</span>-->
                                        <!--<span class="beforeclose" @click="no_like(j.id)"> <i class="fa fa-times delete" aria-hidden="true"></i> <i-->
                                                <!--class="nolike">不感兴趣</i> </span>-->
                                    <!--</div>-->
                                    <div class="clearfix"></div>
                                </h5>
                            </div>
                            <p class="content" >{{j.content}}</p>
                        </li>
                        <!-- 其他分类 -->
                        <li v-show="column!=0" class="headline-item" v-for="i in headlines">
                            <div class="fl indexImg">
                                <img src=""/>
                            </div>
                            <div class="words" >
                                <h3><a :href="'./headline-detail.html?id='+i.id" >{{ i.title }}</a> <span><img src="img/asset-vip.png" class="vip" v-show="i.is_vip"/></span></h3>
                                <h5 class="author">
                                    <div class="fl">
                                        <span class="authorName"> <img :src="i.user.avatar_url" alt=""/> {{ i.user.nickname }} </span>
                                        <span>{{ i.create_time | str2date | date_md }}    {{ i.create_time | str2date | date_hm }}</span>
                                    </div>
                                    <!--<div class="fr attention">-->
                                        <!--<span class="attentionText">关注</span>-->
                                        <!--<span class="beforeclose" @click="no_like(i.id)"> <i class="fa fa-times delete" aria-hidden="true"></i> <i-->
                                                <!--class="nolike">不感兴趣</i> </span>-->
                                    <!--</div>-->
                                    <div class="clearfix"></div>
                                </h5>
                            </div>
                            <p class="content" >{{i.content}}</p>
                        </li>

                    </ul>
                    <ul id="loaded" class="headline">
                    </ul>
                    <div class="stop">
                        <a href="javascript:;" @click="mouse_ale">不要点我呀！<i class="fa fa-refresh" aria-hidden="true"></i></a>
                    </div>

                </div>
                <div class="pagenation">
                        <a v-show="previous" @click="on_page(previous)">上一页</a>
                        <a v-for="num in page_nums" @click="on_page(num)" :class="num==page?'active':''">{{num}}</a>
                        <a v-show="next" @click="on_page(next)">下一页></a>
                </div>

                <!-- <script src="./data-list.js" type="text/javascript"></script> -->
            </div>
            <div class="fl right">
                <div class="activity">
                    <div class="acti" v-for="act in activities" >
                        <a :href="'./activity-detail.html?id='+act.id" >
                        <img :src="act.cover" :alt="'活动' + act.id" style="width: 300px;height: 182px"/>
                        </a>
                        <!--<p>{{ act.id }}</p>-->
                    </div>
                    <!--<div class="acti">-->
                        <!--<img :src="activities[1].cover" alt="活动二"/>-->
                    <!--</div>-->
                </div>
                <div class="block-btn">
                    <p>今天，有什么好东西要和大家分享么?</p>
                    <a class="sui-btn btn-block btn-share" href="./headline-submit.html" target="_blank">发布分享</a>
                </div>
                <!-- ################################################ 热门问答 ####################################################-->
                <div class="question-list">
                    <h3 class="title">热门回答</h3>
                    <div class="lists">
                        <ul>
                            <li class="list-item" v-for="discu in discussion_list"><p class="list-title"> {{ discu.title }} </p>
                                <p class="authorInfo"><span class="authorName"><img src="./img/widget-photo.png"
                                                                                    alt=""/>{{ discu.author }}</span>
                                    <span>{{ discu.create_time | str2date | date_md }} {{ discu.create_time | str2date | date_hm }}</span></p></li>

                        </ul>
                        <a class="sui-btn btn-block btn-bordered btn-more" href="./qa-login.html">查看更多</a>
                    </div>
                </div>
                <div class="card-list">

                </div>
                <div class="activity-list">
                    <h3 class="title">活动日历</h3>
                    <div class="list">
                        <ul>
                            <li class="list-item" v-for="acts in activities"><p class="list-time"> {{ acts.start_time | str2date | date2ymd }} {{ acts.city }}</p>
                                <div class="list-content clearfix">
                                    <div class="fl img">
                                        <img :src="acts.cover" alt="" style="width: 60px;height: 34px"/>
                                    </div>
                                    <div>
                                        <a :href="'./activity-detail.html?id='+acts.id" >
                                        <p>{{ acts.name }}</p>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                        <a class="sui-btn btn-block btn-bordered btn-more" href="./activity-index.html">查看更多</a>
                    </div>
                </div>
                <div class="ad-carousel">
                    <div class="carousel">
                        <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                            <ol class="carousel-indicators">
                                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                                <li data-target="#myCarousel" data-slide-to="1"></li>
                                <li data-target="#myCarousel" data-slide-to="2"></li>
                            </ol>
                            <div class="carousel-inner">
                                <div class="active item">
                                    <img src="./img/widget-ad01.png"/>
                                </div>
                                <div class="item">
                                    <img src="./img/widget-ad01.png"/>
                                </div>
                                <div class="item">
                                    <img src="./img/widget-ad01.png"/>
                                </div>
                            </div>
                            <span class="adname">广告</span>
                        </div>
                    </div>
                </div>
                <!-- <link rel="import" href="../../modules/ui-modules/footer/footer.html?__inline"> -->
            </div>
        </div>
    </div>
    </div>
<div class="footer">

</div>
<script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
<script type="text/javascript" src="js/vue-2.5.16.js"></script>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/headline-login.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>


<script type="text/javascript">
    $('.footer').load('/footer.html')
</script>
<script type="text/javascript">
    $('.base_nav').load('/base_nav.html')
</script>
</body>
</html>

